<template>
  <ScrollArea :bot-margin="100">
    <div class="my-card">
      <div class="order-extra-area row justify-between">
        <div class="page-header">Maintenance Record</div>
      </div>
      <div class="col-5 p-status" v-if="parts && record">
        <q-card-section class="q-pa-sm">
          <div class="row">
            <div class="p-status-field">
              <!-- <div class="col-12 fal q-pa-sm">
                <div class="p-status-field">
                  <span class="weight"> Order Status - </span>
                </div>
              </div> -->
              <div class="col-12 fal q-pa-sm">
                <div>
                  <span class="weight"> Stock Code : </span>
                  {{ parts.stock_code }}
                </div>
              </div>
              <div class="col-12 fal q-pa-sm">
                <div>
                  <span class="weight"> Serial No. : </span>
                  {{ parts.serial_no }}
                  <ObsolescenceTip
                    v-if="parts && parts.obsolescence == 1"
                  ></ObsolescenceTip>
                </div>
              </div>
              <!-- <div class="fal col-12 q-pa-sm">
                <div>
                  <span class="weight"> Defit from Car: </span>
                  {{ parts.car }}
                </div>
              </div> -->
              <div class="fal col-12 q-pa-sm">
                <div>
                  <span class="weight"> Workgroup: </span>
                  {{ parts.workgroup }}
                </div>
              </div>
              <div class="fal col-12 q-pa-sm">
                <div>
                  <span class="weight"> System: </span>
                  {{ parts.system }}
                </div>
              </div>
              <div class="fal col-12 q-pa-sm">
                <div>
                  <span class="weight"> Equipment: </span>
                  {{ record?.equipment }}
                </div>
              </div>
            </div>
          </div>
        </q-card-section>
      </div>
      <q-tabs
        v-model="tab"
        dense
        activeBgColor="white"
        indicator-color="primary"
        content-class="tabs-css"
        align="justify"
        style="background-color: #dae3f4"
        narrow-indicator
        no-caps
      >
        <q-tab name="detail" label="Order Detail" />
        <q-tab name="part2" label="Repair Detail" />
        <!-- <q-tab style="width: 100px" name="record" label="Record" /> -->
      </q-tabs>
      <q-tab-panels v-model="tab" animated class="col-12">
        <q-tab-panel name="detail">
          <div class="row" v-if="record">
            <q-card class="col-12">
              <q-card-section class="row">
                <div class="fal col-5">CEWS Work Order(WO) NO. :</div>
                <q-input
                  class="input-css col-7"
                  borderless
                  v-model="record.work_order_no"
                  :dense="true"
                  hide-bottom-space
                  readonly
                  stack-label
                  :rules="[
                    (val) =>
                      (val.length == 10 && Number.isInteger(parseInt(val))) ||
                      'Work Order should be 10 numbers',
                  ]"
                />
              </q-card-section>
              <q-separator inset />

              <q-card-section class="col-8">
                <div class="row">
                  <div class="fal col-2">Reported Date:</div>
                  <div class="col-4 q-my-sm">
                    <div style="max-width: 300px">
                      <q-input
                        class="input-css"
                        borderless
                        v-model="record.report_date"
                        dense
                        readonly
                      >
                      </q-input>
                    </div>
                  </div>

                  <div class="fal col-2">M' tce Type:</div>
                  <div class="col-4 q-my-sm">
                    <div style="max-width: 300px">
                      <q-select
                        borderless
                        v-model="record.mtce_type"
                        input-debounce="0"
                        hide-bottom-space
                        lazy-rules
                        :options="['CM', 'PM', 'NM', 'IGI']"
                        class="input-css"
                        readonly
                        :dense="true"
                      >
                      </q-select>
                    </div>
                  </div>

                  <div class="fal col-2">Received Date:</div>
                  <div class="col-4 q-my-sm">
                    <div style="max-width: 300px">
                      <q-input
                        class="input-css"
                        borderless
                        v-model="record.receive_date"
                        readonly
                        dense
                      >
                      </q-input>
                    </div>
                  </div>

                  <div class="fal col-2">Location:</div>
                  <div class="col-4 q-my-sm">
                    <div style="max-width: 300px">
                      <q-input
                        class="input-css"
                        borderless
                        v-model="record.location"
                        readonly
                        :dense="true"
                      />
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="fal col-2">Line:</div>
                  <div class="col-4 q-my-sm">
                    <div style="max-width: 300px">
                      <q-input
                        class="input-css"
                        borderless
                        v-model="record.line"
                        readonly
                        :dense="true"
                      />
                    </div>
                  </div>
                  <div class="fal col-2">Line Work Order:</div>
                  <div class="col-4 q-my-sm">
                    <div style="max-width: 300px">
                      <q-input
                        class="input-css"
                        borderless
                        v-model="record.line_work_order"
                        readonly
                        :dense="true"
                      />
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="fal col-2">Delay (I):</div>
                  <div class="col-4 q-my-sm">
                    <div style="max-width: 300px">
                      <q-input
                        class="input-css"
                        borderless
                        v-model="record.delay_i"
                        readonly
                        :dense="true"
                      />
                    </div>
                  </div>

                  <div class="fal col-2">Delay (A):</div>

                  <div class="col-4 q-my-sm">
                    <div style="max-width: 300px">
                      <q-input
                        class="input-css"
                        borderless
                        v-model="record.delay_a"
                        readonly
                        :dense="true"
                      />
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="fal col-5">Eqpt. Description:</div>
                  <q-input
                    class="col-7 q-my-sm input-css"
                    hide-bottom-space
                    borderless
                    v-model="record.equipment"
                    stack-label
                    :rules="[(val) => val.length > 0 || 'Require field']"
                    readonly
                    :dense="true"
                  />
                </div>

                <div class="row">
                  <div class="fal col-4">Failure Symptom:</div>
                  <q-input
                    class="col-8 q-my-sm input-css"
                    type="textarea"
                    hide-bottom-space
                    borderless
                    stack-label
                    :rules="[(val) => val.length > 0 || 'Require field']"
                    v-model="record.symptom"
                    readonly
                    :dense="true"
                  />
                </div>

                <div class="row">
                  <div class="fal col-2">Check In Date:</div>
                  <div class="col-4 q-my-sm">
                    <div style="max-width: 300px">
                      <q-input
                        class="input-css"
                        borderless
                        v-model="record.receive_date"
                        dense
                      >
                      </q-input>
                    </div>
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </div>
        </q-tab-panel>

        <q-tab-panel name="part2">
          <div class="row" v-if="record">
            <!-- <ScrollArea :bot-margin="100"> -->

            <q-card class="col-12">
              <q-card-section class="row">
                <div class="fal col-4">Finding:</div>
                <q-input
                  class="col-8 q-my-sm input-css"
                  borderless
                  v-model="record.finding"
                  readonly
                  :dense="true"
                />

                <div class="fal col-4">Actions:</div>
                <q-input
                  class="col-8 q-my-sm input-css"
                  type="textarea"
                  hide-bottom-space
                  borderless
                  stack-label
                  v-model="record.action"
                  readonly
                  :dense="true"
                />

                <div class="fal col-4">Test Result:</div>
                <q-input
                  class="col-8 q-my-sm input-css"
                  type="textarea"
                  borderless
                  v-model="record.test_result"
                  readonly
                  :dense="true"
                />

                <div class="fal col-4">EAMS Completed Date:</div>
                <q-input
                  class="col-8 q-my-sm input-css"
                  borderless
                  v-model="record.eams_completed_date"
                  readonly
                  :dense="true"
                />

                <div class="fal col-4">Check Out Date:</div>
                <q-input
                  class="col-8 q-my-sm input-css"
                  borderless
                  v-model="record.out_date"
                  readonly
                  :dense="true"
                />

                <div class="fal col-4">Send to:</div>
                <q-input
                  class="col-8 q-my-sm input-css"
                  borderless
                  v-model="record.send_to"
                  readonly
                  :dense="true"
                />
              </q-card-section>
            </q-card>
            <!-- </ScrollArea> -->
          </div>
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </ScrollArea>
</template>

<script setup lang="ts">
import ScrollArea from 'src/components/ScrollArea.vue';
import { getMainRecord } from 'src/services/maintenaceRecordService';
import { searchPart } from 'src/services/partsService';
import { MainRecord, Parts } from 'src/services/type';
import { ref } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const tab = ref('detail');

const mainRecordId = parseInt(route.params.id as string);

const record = ref<MainRecord>();

const parts = ref<Parts>();

async function init() {
  const res = await getMainRecord(mainRecordId);
  console.log(res.data.data);
  record.value = res.data.data;
  const part = await searchPart(
    res.data.data.stock_code,
    res.data.data.serial_no
  );
  parts.value = part.data[0];
  console.log(part.data[0]);
}
init();
</script>
